<template>
  <div class="mobile-layout">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span>{{ currentTime }}</span>
      <div class="status-icons">
        <wifi-outlined />
        <mobile-outlined />
        <poweroff-outlined />
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="mobile-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>

    <!-- 导航栏 -->
    <div class="mobile-footer">
      <div class="footer-content">
        <router-link
          v-for="item in navItems"
          :key="item.path"
          :to="item.path"
          class="nav-item"
          :class="{ active: $route.path === item.path }"
        >
          <component :is="item.icon" class="nav-icon" />
          <span class="nav-text">{{ item.title }}</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import {
  DashboardOutlined,
  LineChartOutlined,
  ToolOutlined,
  ApiOutlined,
  SettingOutlined,
  WifiOutlined,
  MobileOutlined,
  PoweroffOutlined
} from '@ant-design/icons-vue'

const route = useRoute()
const currentTime = ref('')

// 导航项
const navItems = [
  {
    path: '/dashboard',
    title: '生产监控',
    icon: DashboardOutlined
  },
  {
    path: '/yield',
    title: '良率分析',
    icon: LineChartOutlined
  },
  {
    path: '/equipment',
    title: '设备维护',
    icon: ToolOutlined
  },
  {
    path: '/data-integration',
    title: '数据集成',
    icon: ApiOutlined
  },
  {
    path: '/system',
    title: '系统设置',
    icon: SettingOutlined
  }
]

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 定时器
let timer

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="less" scoped>
.mobile-layout {
  background-color: #f5f5f5;
}

.status-bar {
  .status-icons {
    .anticon {
      font-size: 14px;
    }
  }
}

.nav-bar {
  .nav-item {
    .nav-icon {
      font-size: 20px;
    }
  }
}
</style> 